<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>基本资料</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
</head>
<style>
    #left {
        float: left;
        width: 50%;
    }

    #right {
        float: right;
        width: 50%;
    }
</style>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>个人信息</legend>
</fieldset>
<div id="left">
    <div class="layui-card">
        <div class="layui-card-header">可修改信息</div>
        <div class="layui-card-body">
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" src="${imgpath}" id="img" style="width: 200px;height: 200px">
                    <p id="demoText"></p>
                </div>
                <button type="button" class="layui-btn" id="test1">上传图片</button>
            </div>
            <hr class="layui-bg-green">
            <form class="layui-form" lay-filter="updateInformation" id="updateInformation">
                <input type="text" style="display: none" name="name" value="${name}">
                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <textarea type="text" name="address" class="layui-input" lay-verify="required"></textarea>
                    </div>
                </div>
                <br>
                <div class="layui-form-item layui-col-md-offset4" style="margin-top: 5px">
                    <button lay-submit lay-filter="updateBtn" class="layui-btn">修改资料</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="right">
    <div class="layui-card">
        <div class="layui-card-header">基本信息</div>
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="information" id="information" style="margin-top: 5px">
                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label">所属部门</label>
                    <div class="layui-input-inline ">
                        <input type="text" name="deptname" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label">入职时间</label>
                    <div class="layui-input-inline ">
                        <input type="text" name="rzdate" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label">职位</label>
                    <div class="layui-input-inline ">
                        <input type="text" name="rolename" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <textarea type="text" name="address" class="layui-input" disabled></textarea>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
</body>

<script>
    layui.use(['upload', 'form'], function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        var form = layui.form;

        $(function () {
            getInformation();
        })

        // 发送ajax请求当前登录人的信息
        function getInformation() {
            $.ajax({
                url: '${pageContext.request.contextPath}/Staff1Controller/find',
                data: {name: '${name}', page: 0, limit: 0},
                type: 'post',
                async: false,
                dataType: 'json',
                success: function (result) {
                    var data = result.data[0];
                    // console.log(data);
                    //把毫秒值转换成日期
                    data.rzdate = new Date(data.rzdate).toLocaleDateString();
                    form.val('information', data);
                    form.val('updateInformation', data);
                },
                error: function () {
                    alert('查询失败!');
                }
            })

        }

        //修改地址表单提交
        form.on('submit(updateBtn)', function (data) {
            $.ajax({
                url: '${pageContext.request.contextPath}/Staff1Controller/update',
                data: data.field,
                async: false,
                type: 'post',
                dataType: 'json',
                success: function (result) {
                    if (Number(result) > 0) {
                        getInformation();
                        alert('修改成功!');
                    } else {
                        alert('修改失败!');
                    }
                }
            })

            return false;
        })

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '${pageContext.request.contextPath}/Staff1Controller/upload' //改成您自己的上传接口
            , done: function (res) {
                if (res.code > 0) {
                    alert("头像上传失败");
                } else {
                    //上传成功,更新头像
                    alert("头像上传成功");
                    $.ajax({
                        url: '${pageContext.request.contextPath}/Staff1Controller/refresh',
                        data: {path:res.data, name:'${name}'},
                        type: 'post',
                        async: false,
                        dataType: 'json',
                        success: function (result) {

                        }
                    });
                    $("#img").prop("src",res.data);
                }
            }
            , error: function () {
                alert("666");
            }
        });
    })
</script>
</html>
